<template>
	<view class="container">
		<u-search placeholder="查找感兴趣内容~" :show-action="false" v-model="keyword" @custom="onChange" @search="onChange"
			@change="onChange"></u-search>
		<!-- tabs -->
		<block v-if="keyword">
			<view class="tabs-box">
				<u-tabs :list="tabList" lineColor="#000" :is-scroll="false" :current="current" @change="tabChange">
				</u-tabs>
			</view>

			<q-post-list v-show="current === 0" :list="postList" :loadStatus="loadStatus"></q-post-list>
			<q-user-list v-show="current === 1" :list="userList" :loadStatus="loadStatus"></q-user-list>
		</block>
		<block v-else>
			<view class="empty-box">
				<image class="empty-img" mode="widthFix" src="../../static/search.png"></image>
				<text>搜索日记，用户</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				tabList: [{
						name: '动态'
					},
					{
						name: '用户'
					}
				],
				current: 0,
				postList: [],
				userList: [],
				cartList: [],
				goodsList: [],
				pagePost: 1,
				pageUser: 1,
				cartPage: 1,
				goodsPage: 1,
				loadStatus: 'loadmore',
				cartList: [],
				modelShow: false,
				checkCart: {}
			};
		},
		onReachBottom() {
			let type = this.current;
			if (type === 0) {
				this.pagePost++;
				this.getPostList();
			}

			if (type === 1) {
				this.pageUser++;
				this.getUserList();
			}

		},
		methods: {
			onChange() {
				if (this.keyword) {
					let type = this.current;

					this.pagePost = 1;
					this.pageUser = 1;

					if (type === 0) {
						this.postList = [];
						this.getPostList();
					}

					if (type === 1) {
						this.userList = [];
						this.getUserList();
					}
				}
			},
			getUserList() {
				this.loadStatus = 'loading';
				this.$H
					.get('user/search', {
						keyword: this.keyword,
						page: this.pageUser
					})
					.then(res => {
						this.userList = this.userList.concat(res.result.data);
						if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					});
			},
			getPostList() {
				this.loadStatus = 'loading';
				this.$H
					.get('post/search', {
						keyword: this.keyword,
						page: this.pagePost
					})
					.then(res => {
						this.postList = this.postList.concat(res.result.data);
						if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					});
			},
			tabChange(e) {
				let index = e.index;
				this.current = index;

				if (index === 0) {
					this.postList = [];
					this.getPostList();
				}

				if (index === 1) {
					this.userList = [];
					this.getUserList();
				}
			}
		}
	};
</script>
<style>
	page {
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	@import 'search.scss';
</style>
